<template>
  <view
    class="qh-navbar"
    :class="{ 'qh-navbar-shadow': boxShadow, 'z-index-top': zIndexTop }"
    :style="navbarStyle"
  >
    <uni-status-bar></uni-status-bar>
    <view
      class="qh-navbar-content flex-cn"
      :class="{
        left: position == 'left',
        'pad-rt-90':
          (showToHome && loadedSuccess) ||
          (canShowBack && showBack && loadedSuccess),
      }"
    >
      <view class="navbar-left flex-cn">
        <!-- #ifdef MP-WEIXIN -->
        <view
          v-if="showToHome && loadedSuccess"
          class="qh-rt-single qh-rt-a-lujing1442 navbar-home-icon"
          :style="iconStyle"
          @click="backHome"
        ></view>
        <view
          v-else-if="canShowBack && showBack && loadedSuccess"
          class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon"
          :style="iconStyle"
          @click="backPreview"
        ></view>
        <!-- #endif -->
        <!-- #ifdef MP-ALIPAY -->
        <!-- 支付宝非启动页都会有返回键、无法隐藏 -->
        <view class="alipay-back-view"></view>
        <view
          v-if="showToHome && loadedSuccess"
          class="qh-rt-single qh-rt-a-lujing1442 navbar-home-icon"
          :style="iconStyle"
          @click="backHome"
        ></view>
        <!-- <view v-else-if="canShowBack && showBack && loadedSuccess" class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon" :style="iconStyle"
					@click="backPreview"></view> -->
        <!-- #endif -->
      </view>
      <template v-if="$slots['nav-title'] && !title">
        <slot name="nav-title"></slot>
      </template>
      <template v-else>
        <view
          style="text-align: left;font-weight: 550;justify-content: center;"
          class="navbar-text text-ellipsis"
          :class="{
            left: position == 'left',
            'pad-lr-16': !(
              (showToHome && loadedSuccess) ||
              (canShowBack && showBack && loadedSuccess)
            ),
          }"
          :style="titleStyle"
        >
          <text  v-if="pageStatus"
            @click="getLocal"
            style="font-size: 18px; margin: 0px 10px 0px 0px"
            class="home-map-icon iconfont icon-dingwei"
          ></text>
          {{ title }}
        </view>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  name: "qh-navbar",
  props: {
    fixed: {
      type: Boolean,
      default: false,
    }, //是否固定布局在顶部 此属性不会占用页面高度，不推荐使用
    autoBack: {
      type: Boolean,
      default: true,
    }, //点击返回按钮是否自动返回上一页
    showBack: {
      type: Boolean,
      default: true,
    }, //是否显示返回按钮
    title: {
      type: String,
      default: "",
    }, //页面标题
    position: {
      type: String,
      // #ifdef MP-ALIPAY
      default: "left",
      // #endif
      // #ifdef MP-WEIXIN
      default: "",
      // #endif
    }, //标题位置，默认中间对齐，可选“left”左边
    color: {
      type: String,
      default: "",
    }, //组件全局颜色
    titleColor: {
      type: String,
      default: "",
    }, //标题颜色  此项设置高于color
    iconColor: {
      type: String,
      default: "",
    }, //图标颜色  此项设置高于color
    bgColor: {
      type: String,
      default: "#FFFFFF",
    }, //背景颜色
    boxShadow: {
      type: Boolean,
      default: false,
    }, //是否显示底部阴影
    zIndexTop: {
      type: Boolean,
      default: true,
    }, //是否展示在最上层
    bgImageUrl:{
      type: String,
      default:"",
    },
    centerStatus:{  //标题是否居中
      type:Boolean,
      default:false
    },
    letter_spacing_status:{ //字的间隔
      type:Boolean,
      default:false
    }
  },
  emits: ["back"],
  data() {
    return {
      pageStatus:false,
      showToHome: false,
      firstPage: false,
      canShowBack: false,
    };
  },
  computed: {
    pageBackgroundStyle() {
      return {
        'background': 'linear-gradient(to top, #CCFF8A, #b1d681)'
      };
  },

  navbarStyle() {
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1]; // 获取当前页面对象
      const currentPagePath = currentPage.route; // 当前页面路径
      let backgroundImageUrl = "https://safood.supplyocta.com/Uploads/tempImage/2024-04-17/661f878ab2ab09984.png"; // 默认的背景图片
      let defaultBgColor = "#fff"; //默认的背景色
      let style = '';
      console.log(this.bgImageUrl ,'this.bgImageUrl')
      if (this.bgImageUrl) { // 如果传递过来的图片存在
        style = `background-image: url("${this.bgImageUrl}"); background-repeat: no-repeat; background-size: cover; background-position: center;`;
      } else if (this.bgColor) { // 此处表示如果图片不存在，但是有背景色就添加颜色
        style = `background-color: ${this.bgColor};`;
      } else if (currentPagePath === "pages/mer/tabbar/home/home") { // 如果当前页面是home且没有传递背景色，则使用一个渐变色 
        style= 'background: linear-gradient(to top, #CCFF8A, #b1d681);';
      } else { // 如果以上都不满足，则采用默认图片
        style = `background-color: ${defaultBgColor};`;
        // style = `
        //   background-image: url("${backgroundImageUrl}");
        //   background-repeat: no-repeat;
        //   background-size: cover;
        //   background-position: center;
        // `;
      }
      return style;
    },
    iconStyle() {
      let color = this.iconColor
        ? this.iconColor
        : this.color
        ? this.color
        : "";
      return color ? "color:" + color : "";
    },
    titleStyle() {
      let color = this.titleColor
        ? this.titleColor
        : this.color
        ? this.color
        : "";
    let justifyContent = this.centerStatus ? "justify-content: center;" : "justify-content: flex-start;";
    let letterSpacing = this.letter_spacing_status ? "letter-spacing: 5rpx;" : "letter-spacing:0rpx";
    return color ? `color: ${color}; ${justifyContent}; ${letterSpacing}` : justifyContent;
      // return color ? "color:" + color : "";
    },
    loadedSuccess() {
      return this.$store.userInfo.id ? true : false;
    },
  },
  methods: {
	//选择位置
    getLocal() {
      let obj = {};
      if (this.longitude && this.latitude) {
        obj = {
          longitude: this.longitude,
          latitude: this.latitude,
        };
      }
      uni.chooseLocation({
        ...obj,
        success: (res) => {
          console.log(res);
          uni.setStorageSync("userPositionInfo", res);
          this.userPosition = res.name;
          this.longitude = res.longitude;
          this.latitude = res.latitude;
        },
      });
    },
    backHome() {
      if (this.$store.merHomeState) {
        uni.reLaunch({
          url: "/pages/mer/tabbar/home/home",
        });
      } else if (this.$store.mallPreviewState) {
        uni.reLaunch({
          url: "/pages/district/district",
        });
      } else {
        uni.reLaunch({
          url: "/pages/store/store",
        });
      }
    },
    backPreview() {
      if (this.autoBack) {
        uni.navigateBack({
          delta: 1,
        });
      } else {
        this.$emit("back");
      }
    },
  },
  async created() {
    //判断当前页 和 不是当前页面
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1]; // 获取当前页面对象
    const currentPagePath = currentPage.route; // 当前页面路径
    if (currentPagePath === "pages/mer/tabbar/home/home") {
        this.pageStatus = true
    } else {
      this.pageStatus = false
    }

    let tabbarPages = ["pages/mer/tabbar/home/home"];
    if (!this.$store.merHomeState && !this.$store.mallPreviewState) {
      //未开启商户版商城和商城前置页  则门店首页为首页
      tabbarPages.push("pages/store/store");
    } else if (!this.$store.merHomeState && this.$store.mallPreviewState) {
      //使用商城前置页作为首页
      tabbarPages.push("pages/district/district");
    }
    let e = getCurrentPages();
    if (tabbarPages.indexOf(e[e.length - 1].route) !== -1) {
      if (e.length == 1) {
        this.canShowBack = false;
      } else {
        this.canShowBack = true;
      }
    } else if (e.length == 1) {
      // #ifdef MP-ALIPAY
      my.hideBackHome();
      // #endif
      await this.$onLaunched;
      this.showToHome = true;
      this.canShowBack = false;
    } else {
      this.canShowBack = true;
    }
  },
};
</script>
<style>

// @import "/pages/mer/tabbar/home/components/diy_componets/mer-diy-bar/mer-diy-bar.css";
</style>
<style lang="scss">
.qh-navbar {
  background-image: url('https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1735370856676fa86844a21.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
  &.qh-navbar-shadow {
    box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.05);
    z-index: 1;
    position: relative;
  }

  .qh-navbar-content {
    height: 44px;

    &.left {
      width: 560rpx;
      /* #ifdef MP-ALIPAY */
      width: 490rpx;
      /* #endif */
    }

    &.pad-rt-90 {
      padding-right: 90rpx;
    }

    .navbar-left {
      font-size: 0;
      height: 100%;
      overflow: hidden;

      .navbar-home-icon {
        font-size: 34rpx;
        line-height: 34rpx;
        color: #333333;
      }

      .navbar-back-icon {
        font-size: 32rpx;
        line-height: 32rpx;
      }

      .navbar-home-icon,
      .navbar-back-icon {
        color: #333333;
        padding: 20rpx 36rpx 20rpx 20rpx;

        &:active {
          color: #666666;
        }
      }

      /* #ifdef MP-ALIPAY */
      .alipay-back-view {
        width: 80rpx;

        & + .navbar-home-icon {
          padding-left: 10rpx;
        }
      }

      /* #endif */
    }

    .navbar-text {
      flex: 1;
      font-size: 34rpx;
      line-height: 40rpx;
      font-weight: 500;
      color: #000000;
      text-align: center;
	display: flex;
	align-items: center;
      &.left {
        text-align: left;
      }

      &.pad-lr-16 {
        padding: 0 16rpx;
      }
    }
  }

  &.z-index-top {
    position: relative;
    z-index: 10000000000;
  }
}
</style>


